{% extends "VozminoskiStoreBundle:Admin:layout.html.twig" %}
{% block content %}

<form action="{{ path('admin_product_update', { 'id': entity.id }) }}" method="post" {{ form_enctype(edit_form) }} class="form-horizontal">
    <fieldset>
        <legend>Product edit</legend>


        {{ form_errors(edit_form) }}
        <div class="control-group">
            {{ form_label(edit_form.name, 'Name',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.name) }}
            <div class="controls">
                {{ form_widget(edit_form.name) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(edit_form.description, 'Description',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.description) }}
            <div class="controls">
                {{ form_widget(edit_form.description, { 'attr': {'class': 'input-xxlarge'} }) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(edit_form.category, 'Category',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.category) }}
            <div class="controls">
                {{ form_widget(edit_form.category) }}
            </div>
        </div>

        <div class="control-group">
            Composition
            <div class="controls">
                {% for name, value  in entity.composition %}
                    <div id="composition-block-{{ loop.index }}" data-number="{{ loop.index }}">
                        <input name="composition[{{ loop.index }}][name]" class="composition-name" value="{{ name }}">
                        - <input name="composition[{{ loop.index }}][value]" class="composition-value" value="{{ value }}">
                        <button data-composition-number="{{ loop.index }}"  class="delete-composition" >delete</button>
                    </div>
                {% endfor %}
                <br id="composition-end" />
                <button id="add-composition">add</button>
            </div>
        </div>


        <div class="control-group">
            Discount
            <div class="controls">
                {% for discount  in entity.discount %}
                    <div id="discount-block-{{ loop.index }}" data-number="{{ loop.index }}">
                        <input name="discount[{{ loop.index }}][quantity]" class="discount-quantity" value="{{ discount.quantity }}">
                        -
                        <select name="discount[{{ loop.index }}][type]" class="discount-type">
                            <option {% if discount.type == 0 %}selected="selected"{% endif %} value="0">percent</option>
                            <option {% if discount.type == 1 %}selected="selected"{% endif %}  value="1">fixed price</option>
                        </select>

                        - <input name="discount[{{ loop.index }}][value]" class="discount-value" value="{{ discount.value }}">
                        <button data-discount-number="{{ loop.index }}"  class="delete-discount" >delete</button>
                    </div>
                {% endfor %}
                <br id="discount-end" />
                <button id="add-discount">add</button>
            </div>
        </div>

        <div class="control-group">
            {{ form_label(edit_form.price, 'Price',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.price) }}
            <div class="controls">
                {{ form_widget(edit_form.price) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(edit_form.colors, 'Colors',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.colors) }}
            <div class="controls">
                {{ form_widget(edit_form.colors) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(edit_form.sizes, 'Sizes',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.sizes) }}
            <div class="controls">
                {{ form_widget(edit_form.sizes) }}
            </div>
        </div>

        <div class="control-group">
            {{ form_label(edit_form.order, 'Order',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.order) }}
            <div class="controls">
                {{ form_widget(edit_form.order) }}
            </div>
        </div>


        <div class="control-group">
            {{ form_label(edit_form.is_active, 'Is active',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.is_active) }}
            <div class="controls">
                {{ form_widget(edit_form.is_active) }}
            </div>
        </div>

        {% if entity.getWebPath() %}
            <div class="control-group">
                <label class="control-label">Image:</label>
                <div class="controls">
                    <img src="{{ entity.getWebPath() }}" width="75" class="img-rounded">
                </div>
            </div>
        {% endif %}


        <div class="control-group">
            {{ form_label(edit_form.file, 'Upload File',{ 'label_attr': {'class': 'control-label'} }) }}
            {{ form_errors(edit_form.file) }}
            <div class="controls">
                {{ form_widget(edit_form.file) }} <b>default resolution 130x50 </b>
            </div>
        </div>

        <div class="control-group">
            Image
            <div class="controls">
                {% for image  in entity.images %}
                    <div id="image-block-{{ loop.index }}" data-number="{{ loop.index }}" style="margin: 10px">
                        <image src="{{ image.getWebPath }}" width="100" class="img-rounded">
                            delete
                            <input type="checkbox" name="deleteImage[{{ image.id }}]" value="1">
                    </div>
                {% endfor %}
                <br id="images-end" />
                <button id="add-image">add</button>
            </div>
        </div>

        {{ form_rest(edit_form) }}

        <button type="submit" class="btn btn-success">Save</button>
    </fieldset>
</form>

<div style="padding: 50px">
    <form action="{{ path('admin_product_delete', { 'id': entity.id }) }}" method="post">
        {{ form_widget(delete_form) }}
        <button type="submit" class="btn btn-danger">Delete</button>
    </form>

    <a href="{{ path('admin_product') }}" class="btn btn-primary">
        Back to the list
    </a>
</div>


    <div style="display: none" id="composition-template">
        <div id="" data-number="" >
            <input name="" class="composition-name" value="">
            - <input name="" class="composition-value" value="">
            <button data-composition-number=""  class="delete-composition" >delete</button>
        </div>
    </div>

    <div style="display: none" id="discount-template">
        <div id="" data-number="" >
            <input name="" class="discount-quantity" value="">
            -
            <select name="" class="discount-type">
                <option value="0">percent</option>
                <option value="1">fixed price</option>
            </select>
            - <input name="" class="discount-value" value="">
            <button data-discount-number=""  class="delete-discount" >delete</button>
        </div>
    </div>

    <div style="display: none" id="image-template">
        <div id="" data-number="" >
            <input type="file" class="image-file" name="">
        </div>
    </div>

    <script type="text/javascript">
    $('.delete-composition').live('click', function(event) {
        event.preventDefault();
        $('#composition-block-' + $(this).attr('data-composition-number')).remove();
        return false;
    });


    $('#add-composition').on('click', function(event) {
        event.preventDefault();

        var compositionBlock = $('#composition-template').children(),
                newCompositionBlock = compositionBlock.clone(),
                compositionNumber = $(this).parent().find('div :last').attr('data-number')
                        ? $(this).parent().find('div :last').attr('data-number') : 0,
                newCompositionNumber = parseInt(compositionNumber) + 1;

        newCompositionBlock.attr('data-number', newCompositionNumber);
        newCompositionBlock.attr('id', 'composition-block-' + newCompositionNumber);

        newCompositionBlock.find('.composition-value').val('');
        newCompositionBlock.find('.composition-value').attr('name', 'composition[' + newCompositionNumber + '][value]');
        newCompositionBlock.find('.composition-name').val('');
        newCompositionBlock.find('.composition-name').attr('name', 'composition[' + newCompositionNumber + '][name]');
        newCompositionBlock.find('.delete-composition').attr('data-composition-number', newCompositionNumber);


        $('#composition-end').before(newCompositionBlock);

        return false;
    });


    $('#add-discount').on('click', function(event) {
        event.preventDefault();

        var discountBlock = $('#discount-template').children(),
                newDiscountBlockBlock = discountBlock.clone(),
                discountNumber = $(this).parent().find('div :last').attr('data-number')
                        ? $(this).parent().find('div :last').attr('data-number') : 0,
                newDiscountNumber = parseInt(discountNumber) + 1;

        newDiscountBlockBlock.attr('data-number', newDiscountNumber);
        newDiscountBlockBlock.attr('id', 'discount-block-' + newDiscountNumber);

        newDiscountBlockBlock.find('.discount-value').val('');
        newDiscountBlockBlock.find('.discount-value').attr('name', 'discount[' + newDiscountNumber + '][value]');

        newDiscountBlockBlock.find('.discount-type').attr('name', 'discount[' + newDiscountNumber + '][type]');

        newDiscountBlockBlock.find('.discount-quantity').val('');
        newDiscountBlockBlock.find('.discount-quantity').attr('name', 'discount[' + newDiscountNumber + '][quantity]');


        newDiscountBlockBlock.find('.delete-discount').attr('data-discount-number', newDiscountNumber);


        $('#discount-end').before(newDiscountBlockBlock);

        return false;
    });

    $('.delete-discount').live('click', function(event) {
        event.preventDefault();
        $('#discount-block-' + $(this).attr('data-discount-number')).remove();
        return false;
    });


    $('#add-image').on('click', function(event) {
        event.preventDefault();

        var imageBlock = $('#image-template').children(),
                newImageBlockBlock = imageBlock.clone(),

                imageNumber = $(this).parent().find('div :last').attr('data-number')
                        ? $(this).parent().find('div :last').attr('data-number') : 0,
                newImageNumber = parseInt(imageNumber) + 1;

        newImageBlockBlock.attr('data-number', newImageNumber);
        newImageBlockBlock.attr('id', 'image-block-' + newImageNumber);

        newImageBlockBlock.find('.image-file').attr('name', 'image[' + newImageNumber + ']');


        $('#images-end').before(newImageBlockBlock);

        return false;
    });

    </script>

{% endblock %}

